<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <title>农资店</title>
</head>

<body>
    <div id="app" v-cloak>
        <div class="title">
            <div>
                名称：<el-input v-model="input" style="width: 200px" placeholder="请输入内容"></el-input>
                手机号<el-input v-model="input1" style="width: 200px" placeholder="请输入内容"></el-input>
                <!-- 政治面貌：
                <el-select v-model="value" placeholder="请选择" style="width: 200px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select> -->
                <el-button type="danger" style="margin-left: 1%;" @click="check">查询</el-button>
                <el-button style="width: 60px" @click="reset">重置</el-button>
                <button class="button" @click="personalAdd">添加</button>
                <!-- <button class="button">批量导入/更新</button>
                <button class="button">批量删除</button>
                <button class="button">批量导出</button> -->
            </div>
        </div>
        <div class="body">
            <div class="left">
                <el-tree ref="tree" style="max-width: 600px" :data="treeData" @node-click="handleNodeClick"
                    :props="{ label: 'Province' }" />
                <template #default="{ node, data }">
                    <div class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <div>
                            <el-button type="primary" link @click="personalAdds(data)">
                                +
                            </el-button>
                            <el-button type="primary" link @click="handleEdits(data)">
                                编辑
                            </el-button>
                            <el-button style="margin-left: 4px" type="danger" link @click="remove(node, data)">
                                删除
                            </el-button>
                        </div>
                    </div>
                </template>
            </div>
            <div class="right">
                <el-button class="zdtype" @click="handleOpenDialog">设置显示字段</el-button>
                <el-table id="table"
                    :data-options="JSON.stringify({ 'TableName': 'agricultural_supplies_store','primary_key':'Agricultural_Supplies_Store_SerialNumber'})"
                    height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
                    @selection-change="handleSelectionChange">
                    <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
                        :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                        <template #scope="scope">
                            <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
                                {{ scope.row[column.prop] }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="132">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                                编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
                    :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
                    :total="Total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
        <el-dialog v-model="showDialog" width="550" class="custom-dialog">
            <template #header>
                <div class="dialog-header">
                    <span>设置显示字段</span>
                </div>
            </template>
            <div class="dialog-content">
                <el-checkbox v-model="isAllChecked" @change="handleAllChecked"
                    class="full-width-checkbox">全选</el-checkbox>
                <div class="checkbox-columns">
                    <el-checkbox-group v-model="checkedFields" style="width: 100%; display: flex; flex-wrap: wrap">
                        <el-checkbox :disabled="field.COLUMN_KEY === 'PRI'" v-for="field in fields" :key="field"
                            :value="field" style="width: 50%; height: 30px; margin-right: 0px">
                            {{ field.COLUMN_COMMENT }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
                    <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="https://app.unpkg.com/element-plus@2.9.7/files/es/locale/lang/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="js/index.js"></script>
</body>

</html>